.SetHeaderNavOptionIcon(@num: 1){
	@name : e(%(".option%d", @num));
	@url : %("../images/header-nav/icon%d.png", @num);
	@{name} {
		.icon {
			background-image: data-uri(@url);
		}
	}
}

.header {
	width: 100%;
	height: 65px;
	background-color: #1786CA;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#2689cf,endColorStr=#0081c2); /*IE 6 7 8*/
	background: -ms-linear-gradient(left, #2689cf,  #0081c2);        /* IE 10 */
	background: -moz-linear-gradient(left,#2689cf, #0081c2);/*火狐*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#2689cf), to(#0081c2));	/*谷歌*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2689cf), to(#0081c2));      /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(left, #2689cf, #0081c2);   /*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(left, #2689cf, #0081c2);  /*Opera 11.10+*/
	.logo {
		float: left;
		overflow: hidden;
		img {
			margin: 10px;
			width: 185px;
			height: 45px;
		}
	}
	.header-nav {
		float: right;
		height: 65px;
		.option {
			float: right;
			display: inline-block;
			width: 130px;
			height: 65px;
			cursor: pointer;
			.icon {
				float: left;
				display: inline-block;
				width: 50px;
				height: 65px;
				background: center no-repeat;
			}
			p {
				margin-top: 7px;
				float: left;
				font-size: 12px;
				line-height: 55px;
				color: #fff;
			}
			&:hover, &.active {
				background-color: #058FD4;
			}
			&.brl {
				border-right: 1px solid #0479B5;
			}
			&.bll {
				border-left: 1px solid #2298D6;
			}
		}
		.user {
			float: right;
			width: 180px;
			height: 65px;
			.userinfo {
				width: 100%;
				height: 100%;
			}
			.username {
				position: relative;
				float: left;
				padding-right: 30px;
				width: 100px;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				.btn {
					position: absolute;
					top: 22px;
					right: 15px;
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 10px solid #fff;
				}
			}
			.logout {
				width: 100%;
				height: 54px;
				height: 0;
				background-color: #058FD4;
				overflow: hidden;
				a {
					display: inline-block;
					padding: 0 40px;
					width: 60px;
					height: 54px;
					margin: 0 15px;
					border-top: 1px solid #0583C5;
					background: data-uri('../images/header-nav/exit.png') 40px center no-repeat;
					font-size: 12px;
					color: #fff;
					text-align: right;
					line-height: 54px;
					text-decoration: none;
				}
			}
		}
		.loop(@num: 1) when(@num > 0){
			.loop(@num - 1);
			.SetHeaderNavOptionIcon(@num);
		}
		.loop(7)
	}
}